<style scoped>
.vendorReturnQuery {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.vendorReturnQuery_top {
  display: flex;
  padding-top: 1vh;
  white-space: nowrap;
}
.vendorReturnQuery_top2 {
  height: 5.5vh;
  padding-top: 1vh;
  border-bottom: 2px solid #f4f4f4;
  display: flex;
  white-space: nowrap;
}
.vendorReturnQuery_top p,
.vendorReturnQuery_top2 p {
  margin: 0 10px 0 20px;
}
.vendorReturnQuery_top2 input:last-child {
  width: 390px;
}
.a_color {
  color: #017aff;
}
.vendorReturnQuery_c {
  display: flex;
  width: 100%;
  height: 74%;
}
/*                   566464646*/
#content1 {
  width: 30%;
}
#content2 {
  width: 69%;
}
.divider {
  width: 1%;
  height: 99%;
  background-color: #f4f4f4;
  cursor: pointer;
}
.divider i {
  position: absolute;
  top: 50%;
  font-weight: 1000;
  color: #017aff;
}
.content1_1 {
  display: flex;
  margin: 12px 0;
  overflow: hidden;
}
.c_button {
  width: 35px;
  height: 30px;
  margin: 0 0 0 -1px;
  /* padding:4px 6px 0 0; */
  background: #dbdbdb;
  font-size: 13px;
  border: 0px solid #dbdbdb;
  outline: none;
}
.hand {
  cursor: pointer;
}
.c2 {
  display: flex;
  height: 40px;
  margin-top: 10px;
  flex-wrap: nowrap;
}
.c2_2 {
  display: flex;
  margin-left: 115px;
  height: 40px;
}
.c2_1 {
  display: flex;
  height: 40px;
}
.c2_2 p {
  margin: 8px 16px 0 0;
}
.check {
  width: 90px;
  height: 40px;
  border: 1px solid #d3cdcd;
  border-radius: 5px;
  padding: 8px 0 0 7px;
}
.c2_button {
  height: 25px;
  margin: 8px 5px 0 35px;
}
.c2_button1 {
  height: 25px;
  margin: 8px 5px 0 0;
}
.date_1 {
  margin: 3px 6px 0 0;
}
.remarks_1 {
  margin: 3px 6px 0 45px;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}

/* .popup{
    width:400px;height:200px;position:absolute;top:50%;left:50%;border:1px solid black
  } */
.popup {
  width: 400px;
  height: 200px;
  border: 1px solid #dbdbdb;
  box-shadow: 0 2px 2px 2px #dbdbdb;
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -200px;
  background: white;
  /* display: block; */
}
.popup_t {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgb(244, 244, 244);
  padding: 8px 15px;
}
.popup_t p {
  font-weight: 700;
}
.popup_c {
  padding: 8px 15px;
}
.popup_button {
  margin: 5px 0 0 0;
  width: 94%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid#dbdbdb;
  border-radius: 3px;
}
.popup_b {
  margin: 10px 0 0 0;
  padding-left: 230px;
}
._content {
  width: 100%;
  margin: 1vh 0;
  display: flex;
  justify-content: space-between;
}
.vendorReturnQuery input:focus {
  outline: none;
  border: 1px solid #017aff;
}
.inp {
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  height: 30px;
  padding: 0 15px;
}
.inp2 {
  width: 160px;
}
.inp3 {
  width: 60px;
  margin-right: 10px;
}
.inp4 {
  width: 160px;
}
.inp5 {
  width: 380px;
  margin: 0 0 15px 15px;
}
.export {
  width: 260px;
  height: 135px;
  position: absolute;
  top: 25%;
  left: 30%;
  background: white;
  z-index: 1000;
  padding: 10px 0 0 10px;
  box-shadow: 0 3px 3px 3px #e7e4e4;
}
.export_box {
  padding: 10px 0 18px 0;
}
.export p {
  font-weight: 700;
}
.tip {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 5px 0 5px;
}
.tip1 {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 1px 0 4px;
}
</style>

<style>
.vendorReturnQuery .el-input__icon {
  line-height: 22px;
}
.vendorReturnQuery .vendorReturnQuery_top .el-select .el-input__inner {
  height: 30px;
  width: 160px;
}
.vendorReturnQuery .vendorReturnQuery_top .ph .el-input__inner {
  height: 30px;
  width: 160px;
}
.vendorReturnQuery .c_b .el-button {
  padding: 0;
}
.vendorReturnQuery_top2 input[data-v-0deda660] {
  width: 160px;
  height: 30px;
}
.vendorReturnQuery .content1_1 .el-input__inner {
  height: 30px;
}
.vendorReturnQuery .vendorReturnQuery_top .el-select__tags {
  top: 50%;
}
.vendorReturnQuery .block .el-input__inner {
  height: 30px;
}
.vendorReturnQuery .block .el-input__icon {
  line-height: 23px;
}
.vendorReturnQuery .block .el-date-editor .el-range-separator {
  padding: 0;
  margin-top: -9px;
}
.vendorReturnQuery .vendorReturnQuery_top .sty .el-input__inner {
  height: 30px;
  width: 90px;
}
.vendorReturnQuery .vendorReturnQuery_top .sty2 .el-input__inner {
  height: 30px;
  width: 160px;
}
.vendorReturnQuery .vendorReturnQuery_top2 .sty .el-input__inner {
  height: 30px;
  width: 160px;
}
.vendorReturnQuery .vendorReturnQuery_top2 .sty1 .el-input__inner {
  height: 30px;
  width: 100px;
}
.vendorReturnQuery ._content2 .el-checkbox.is-bordered {
  margin: 0 16px 0 0;
  width: 90px;
  height: 37px;
}
.vendorReturnQuery ._content2 .el-checkbox.is-bordered {
  height: 30px;
  padding: 5px 20px 9px 10px;
}
.vendorReturnQuery ._content2 .el-button {
  /* line-height: 0; */
  width: 40px;
}
.vendorReturnQuery ._content2 .el-button {
  margin: 0;
}
.vendorReturnQuery .export .el-radio {
  margin: 8px 20px 0 0;
}
.vendorReturnQuery .export .el-radio__label {
  font-size: 15px;
  color: black;
}

.vendorReturnQuery .el-pagination .el-select .el-input .el-input__inner,
.vendorReturnQuery .el-pagination .el-select .el-input {
  width: 90px;
}
.vendorReturnQuery .el-pagination {
  float: right;
  margin-top: 5px;
}
.vendorReturnQuery .el-input--mini .el-input__inner {
  height: 23px;
}
.vendorReturnQuery .vendorReturnQuery_top .el-date-editor .el-range-separator {
  line-height: 28px;
}

.vendorReturnQuery .el-table__footer td {
  height: 26px;
}

.vendorReturnQuery .el-table .cell {
  padding: 0 0 0 5px;
}

.vendorReturnQuery
  .el-pagination--small
  .el-pagination__editor.el-input
  .el-input__inner {
  width: 40px;
}
</style>

<template>
  <div class="vendorReturnQuery">
    <!-- <div class="mask" :style="{display:showMask}"></div> -->
    <div class="vendorReturnQuery_top">
      <p class="">厂商</p>
      <input
        class="inp inp3"
        type="text"
        v-model="manufacturerNo"
        @blur="manufacturerNoBlur"
      />
      <div class="sty">
        <el-select
          v-model="manufacturerName"
          @change="
            (e) => {
              this.manufacturerNo = e
            }
          "
        >
          <el-option
            v-for="item in manufacturerList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <p>品名</p>
      <el-select v-model="commodityName" clearable>
        <el-option
          v-for="item in commodityNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <p>季度</p>
      <el-select v-model="quarter" clearable>
        <el-option
          v-for="item in quarterList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <p>公司仓库</p>
      <input
        class="inp inp3"
        type="text"
        v-model="companyNo"
        @blur="companyNoBlur"
      />
      <div class="sty">
        <el-select
          v-model="companyName"
          @change="
            (e) => {
              this.companyNo = e
            }
          "
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <p>配货方式</p>
      <div class="sty2">
        <el-select v-model="cooperateWay">
          <el-option
            v-for="item in cooperateWayList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <p style="width: 65px; text-align: right">日期</p>
      <div class="block">
        <el-date-picker
          unlink-panels
          value-format="yyyy-MM-dd"
          v-model="dateList"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
    </div>
    <div class="vendorReturnQuery_top2">
      <p class="">货号</p>
      <input class="inp inp2" type="text" v-model="kindsNumber" clearable />
      <p>品牌</p>
      <div class="sty">
        <el-select v-model="brandedName" clearable>
          <el-option
            v-for="item in brandedNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <p>单号</p>
      <input class="inp inp4" type="text" v-model="receiptsNumber" clearable />
      <p>厂退序号</p>
      <input class="inp inp2" type="text" v-model="sequence" clearable />
      <p>单据确认</p>
      <div class="sty">
        <el-select v-model="affirm">
          <el-option
            v-for="item in affirmList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="_content">
      <div>
        <el-button @click="search(1)" icon="el-icon-search" type="primary"
          >查询</el-button
        >
        <el-button @click="showpwd1" icon="el-icon-edit-outline"
          >改单</el-button
        >
        <el-button
          @click="showuopplement"
          icon="el-icon-document-add"
          :disabled="Dis1"
          >补单</el-button
        >
        <el-button
          @click="confirm"
          icon="el-icon-circle-check"
          :disabled="isConfirm"
          >确认</el-button
        >
        <el-button
          @click="
            () => {
              this.showExport = 'block'
            }
          "
          icon="el-icon-upload2"
          >导出</el-button
        >
        <el-button @click="printReport" icon="el-icon-printer">列印</el-button>
        <el-button @click="dele" icon="el-icon-delete" :disabled="Dis"
          >删除</el-button
        >
      </div>
      <div class="_content2" style="display: flex">
        <!-- <el-checkbox v-model="checked1" label="按日期" border></el-checkbox> -->
        <div style="margin-top: 5px; display: flex">
          <div class="tip" style="background: #6bcc7b"></div>
          :已完成
          <div class="tip" style="background: #ff0000"></div>
          :
          <p style="margin-right: 15px">未确认</p>
        </div>
        <el-checkbox v-model="checked" label="二维" border></el-checkbox>
      </div>
    </div>
    <div class="vendorReturnQuery_c">
      <div id="content1">
        <el-table
          id="OneTable"
          :data="sequenceData"
          style="width: 100%"
          height="69.5vh"
          border
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '30px'
          }"
          :cell-style="changeCellStyle"
          @row-click="rowClick"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column label="单据状态" width="80">
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <div
                  class="tip1"
                  :style="{
                    background: scope.row.affirm == 0 ? '#FF0000' : '#6BCC7B'
                  }"
                ></div>
                <p>{{ scope.row.affirm == 0 ? '未确认' : '已完成' }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sequence"
            label="退货序号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="manufacturerName"
            label="厂商"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="sum"
            label="数量"
            min-width="60"
          ></el-table-column>
          <el-table-column
            prop="money"
            label="售价金额"
            min-width="100"
          ></el-table-column>
          <!-- <el-table-column prop="affirm" label="确认" width="50"></el-table-column> -->
          <el-table-column
            prop="receiptsNumber"
            label="单号"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="purchaseTime"
            label="退货日期"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="cooperateWay"
            label="配货方式"
            width="80"
          ></el-table-column>
        </el-table>
        <el-pagination
          small
          background
          ref="paginationLeft"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limitLeft"
          :page-count="pagesNumLeft"
          :total="dataLenLeft"
          @current-change="handleCurrentChangeLeft"
          @size-change="handleSizeChangeLeft"
        ></el-pagination>
      </div>
      <div class="divider" @click="dividerClick">
        <i v-if="!areaFlag" class="el-icon-arrow-right"></i>
        <i v-if="areaFlag" class="el-icon-arrow-left"></i>
      </div>
      <div id="content2">
        <el-table
          id="TwoTable"
          :data="kindsNumberData"
          style="width: 100%"
          height="69vh"
          highlight-current-row
          ref="table"
          show-summary
          border
          :summary-method="getSummaries"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '30px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <template v-for="i in knhList">
            <el-table-column
              :prop="i.prop"
              :label="i.label"
              :min-width="i.width"
              :key="i.prop"
              v-if="i.isShow"
              show-overflow-tooltip
              width="100"
            ></el-table-column>
          </template>
        </el-table>
        <el-pagination
          small
          background
          ref="paginationRight"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 改单密码验证 -->
    <verify-password
      v-if="showpwd"
      :operationType="operationType"
      :isConfirm="isConfirm"
      @closepwd="closepwd"
      @showRevision="showRevision"
    ></verify-password>
    <!-- 改单 -->
    <revi-sion
      :Str="this.Str"
      :style="{ display: showReviSion }"
      :isRFID="isRFID"
      :selectInputSequence="inputSequence"
      :manufacturerL="manufacturerList"
      :warehouseL="warehouseList"
      :showReviSion="showReviSion"
      @closeReviSion="
        () => {
          this.showReviSion = 'none'
        }
      "
    ></revi-sion>
    <!-- 导出框 -->
    <div class="export" :style="{ display: showExport }">
      <p>导出类型</p>
      <div class="export_box">
        <el-radio-group v-model="radio">
          <el-radio :label="1">导出汇总表</el-radio>
          <el-radio :label="2">导出明细表</el-radio></el-radio-group
        >
      </div>
      <el-button
        @click="
          () => {
            this.showExport = 'none'
          }
        "
        style="margin-left: 92px"
        >取消</el-button
      >
      <el-button type="primary" @click="confirmExport">确定</el-button>
    </div>
    <!-- 补单 -->
    <sup-order
      :style="{ display: showUopplement }"
      :sequence="this.inputSequence"
      @closeuopplement="
        () => {
          this.showUopplement = 'none'
        }
      "
      @determine="determine"
    ></sup-order>
    <!-- 底部框 -->
    <foot-view class="footView">
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <el-checkbox-group v-model="selectHeaderList">
            <el-checkbox
              v-for="i in headerList"
              :label="i.value"
              :key="i.value"
              style="margin-bottom: 7px"
            ></el-checkbox>
          </el-checkbox-group>
          <i slot="reference" class="el-icon-date">表头配置</i></el-popover
        >
        <span>数据库：{{ jxQuarter }}</span>
        <span>记录数：{{ amount }}</span>
      </div>
    </foot-view>
    <print-area
      v-show="false"
      isInput="退"
      isVendor="厂商"
      :manufacturerNo="printVendor"
      :inputSequence="inputSequence"
      :jxQuarter="jxQuarter"
      :inputDate="inputDate"
      :manufacturerName="printVendorName"
      :principal="principal"
      :phone="phone"
      :address="address"
      :printTotal="printTotal"
      :printMoney="printMoney"
      :printStyle="printStyle"
      :printSellingPrice="printSellingPrice"
      :remark="remark"
    ></print-area>
  </div>
</template>

<script>
const resources = require('../../../config/printCSS')

import footView from '../../../components/FootView'
import reviSion from './childComps/ReviSion'
import verifyPassword from '../../../components/VerifyPassword'
import supOrder from '../../../components/SupOrder'
import printArea from '../../../components/PrintVendorStock'

import {
  getManufacturer,
  outQuery,
  affirmRfidOut,
  clearSequence
} from '../../../network/manufacturer'
import { getWarehouse } from '../../../network/warehouse'
import { getProductName } from '../../../network/productName'
import { getBranded } from '../../../network/branded'
import { getQuarter } from '../../../network/quarter'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'
import cookieFn from '../../../components/mixins/cookieFn'

import table2excel from 'js-table2excel'

import { newCloumn } from '../../../util/exportExcelTitle'

export default {
  name: 'vendor_return_query',
  mixins: [today, enterUp, cookieFn],
  created() {
    console.log(this.jxShowCost)
    this.knhList1[11].isShow = !this.jxShowCost
    this.knhList1[12].isShow = !this.jxShowCost
    this.knhList2[16].isShow = !this.jxShowCost
    this.knhList2[17].isShow = !this.jxShowCost
    this.inpList = this.getInput()

    this.flag = 1

    if (localStorage.getItem('jx_Rtitle1')) {
      this.selectHeaderList = localStorage.getItem('jx_Rtitle1').split(',')
    }

    this.knhList = this.knhList1

    // 默认选之前一周
    // this.dateList = [this.searchDate(7),this.searchDate()]

    // 获取厂商信息
    getManufacturer({ limit: 9999 }).then((res) => {
      // console.log(res)
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach((e) => {
          this.manufacturerList.push({ value: e.no, label: e.name })
          this.manufacturerMap[e.no] = e.name
        })
      }
      // console.log(this.manufacturerList)
    })
    // 获取仓库信息
    getWarehouse().then((res) => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.sort((a, b) => {
          return a.no.localeCompare(b.no)
        })
        list.forEach((e) => {
          this.warehouseList.push({
            value: e.no,
            label: e.name,
            company: e.brandedCompany
          })
          if (e.isMainWarehouse) {
            this.mainWarehouse = e.no
            this.companyNo = e.no
            this.companyName = e.name
          }
        })
      }
      // console.log(this.warehouseList)
    })
    // 获取品名信息
    getProductName().then((res) => {
      // console.log(res)
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach((e) => {
          this.commodityNameList.push({ value: e.name, label: e.name })
        })
      }
    })
    // 获取季度
    getQuarter().then((res) => {
      if (res.data.code == 200) {
        res.data.data.forEach((e) => {
          this.quarterList.push({ value: e.id, label: e.name })
          this.quarterMap[e.id] = e.name
        })
      }
    })
  },
  data() {
    return {
      Str: '',
      strRandom: Math.random().toString(36).substring(2, 7), //随机字符串
      Dis: false,
      Dis1: false,
      inpList: [],
      // 总数据条数
      dataLenLeft: 0,
      // 总页码
      pagesNumLeft: 0,
      // 分页条数
      limitLeft: 20,
      // 当前页码
      currentPageLeft: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      operationType: 0,

      pWd: '',
      showpwd: false,
      showReviSion: 'none',
      showUopplement: 'none',
      showExport: 'none',
      showNew_vr: 'none',

      // 按钮
      isConfirm: false,
      isRFID: false,

      inputSequence: '',
      pickUpWarehouse: '',

      manufacturerNo: '',
      manufacturerName: '',
      manufacturerList: [],
      manufacturerMap: {},
      commodityName: '',
      commodityNameList: [],
      quarter: '',
      quarterList: [],
      quarterMap: {},
      mainWarehouse: '',
      warehouseList: [],
      companyNo: '',
      companyName: '',
      cooperateWay: '全部',
      cooperateWayList: [
        { value: '全部', label: '全部' },
        { value: '配货', label: '配货' },
        { value: '订货', label: '订货' },
        { value: '订断', label: '订断' },
        { value: '追断', label: '追断' }
      ],
      affirm: '全部',
      affirmList: [
        { value: '全部', label: '全部' },
        { value: '未确认', label: '未确认' },
        { value: '已完成', label: '已完成' }
      ],
      kindsNumber: '',
      brandedName: '',
      brandedNameList: [],
      receiptsNumber: '',
      sequence: '',
      dateList: null,
      checked: false,
      // checked2: false,

      // 左表
      sequenceData: [],
      sequenceDataList: [],

      // 右表
      kindsNumberData: [],
      // 右总表
      kindsNumberList: [],
      // 右二维表
      styleNumberList: [],

      radio: 1,

      knhList: [],
      knhList1: [
        { prop: 'sequence', label: '厂退序号', width: '120', isShow: true },
        { prop: 'odd', label: '单据号', width: '120', isShow: true },
        { prop: 'manufacturerName', label: '厂商', width: '100', isShow: true },
        { prop: 'kindsNumber', label: '货号', width: '160', isShow: true },
        { prop: 'styleNumber', label: '款号', width: '100', isShow: true },
        { prop: 'colorNo', label: '颜色编号', width: '80', isShow: true },
        { prop: 'colorName', label: '颜色名称', width: '80', isShow: true },
        { prop: 'size', label: '尺码', width: '50', isShow: true },
        { prop: 'sum', label: '数量', width: '60', isShow: true },
        { prop: 'sellingPrice', label: '售价', width: '60', isShow: true },
        {
          prop: 'sellingPriceMoney',
          label: '售价金额',
          width: '90',
          isShow: true
        },
        { prop: 'manufacturerPrice', label: '厂价', width: '70', isShow: true },
        {
          prop: 'manufacturerPriceMoney',
          label: '厂价金额',
          width: '90',
          isShow: true
        },
        { prop: 'purchaseTime', label: '退货日期', width: '100', isShow: true },
        { prop: 'remark', label: '备注', width: '160', isShow: true },
        { prop: 'cooperateWay', label: '配货方式', width: '70', isShow: true },
        { prop: 'warehouseNo', label: '仓库编号', width: '70', isShow: true },
        { prop: 'operator', label: '操作员', width: '100', isShow: true },
        { prop: 'enteringTime', label: '录入时间', width: '160', isShow: true }
      ],
      knhList2: [
        { prop: 'typeNumber', label: '款号', width: '120', isShow: true },
        { prop: 'colorName', label: '颜色', width: '100', isShow: true },
        { prop: 'c05', label: '05-XS', width: '30', isShow: true },
        { prop: 'c07', label: '07-S', width: '30', isShow: true },
        { prop: 'c09', label: '09-M', width: '30', isShow: true },
        { prop: 'c11', label: '11-L', width: '30', isShow: true },
        { prop: 'c13', label: '13-XL', width: '30', isShow: true },
        { prop: 'c15', label: '15-2L', width: '30', isShow: true },
        { prop: 'c17', label: '17-3L', width: '30', isShow: true },
        { prop: 'c19', label: '19-4L', width: '30', isShow: true },
        { prop: 'c21', label: '21-5L', width: '30', isShow: true },
        { prop: 'c23', label: '23-6L', width: '30', isShow: true },
        { prop: 'f', label: 'F', width: '30', isShow: true },
        { prop: 'subTotal', label: '小计', width: '60', isShow: true },
        { prop: 'sellingPrice', label: '售价', width: '70', isShow: true },
        { prop: 'money', label: '售价金额', width: '90', isShow: true },
        { prop: 'manufacturerPrice', label: '厂价', width: '70', isShow: true },
        {
          prop: 'manufacturerPriceMoney',
          label: '厂价金额',
          width: '90',
          isShow: true
        },
        { prop: 'brandedName', label: '品牌', width: '100', isShow: true },
        { prop: 'quarterName', label: '季度', width: '80', isShow: true }
      ],

      // 总数
      amount: 0,

      // 设置表头
      selectHeaderList: [
        '厂退序号',
        '单据号',
        '厂商',
        '货号',
        '款号',
        '颜色编号',
        '颜色名称',
        '尺码',
        '数量',
        '售价',
        '售价金额',
        '厂价',
        '厂价金额',
        '退货日期',
        '备注',
        '配货方式',
        '仓库编号',
        '操作员',
        '录入时间'
      ],
      headerList: [
        { value: '厂退序号' },
        { value: '单据号' },
        { value: '厂商' },
        { value: '货号' },
        { value: '款号' },
        { value: '颜色编号' },
        { value: '颜色名称' },
        { value: '尺码' },
        { value: '数量' },
        { value: '售价' },
        { value: '售价金额' },
        { value: '厂价' },
        { value: '厂价金额' },
        { value: '退货日期' },
        { value: '备注' },
        { value: '配货方式' },
        { value: '仓库编号' },
        { value: '操作员' },
        { value: '录入时间' }
      ],

      navList: this.$store.state.navList,
      flag: 0,

      jxQuarter: this.getCookie('jxQuarter'),
      jxChangeOrder: this.getCookie('jxChangeOrder') == '0',
      jxShowCost: this.getCookie('jxShowCost') == '0',

      // 打印
      styleList: [],
      printTotal: 0,
      printMoney: 0,
      // 款号合计
      printStyle: 0,
      printSellingPrice: 0,
      printVendor: '',
      printVendorName: '',
      principal: '',
      contact: '',
      phone: '',
      inputDate: '',
      address: '',
      remark: '',

      summation: {},

      areaFlag: false
    }
  },
  watch: {
    manufacturerNo(a, b) {
      this.currentPageLeft = 1
      this.manufacturerNo = a.toUpperCase().trim()
      this.brandedName = ''
      this.brandedNameList = []
      if (a) {
        let brandedCompany = ''
        // 厂商编号查找品牌公司
        getManufacturer({ no: a, limit: 99999 }).then((res) => {
          for (const i of res.data.data) {
            if (i.no == a) {
              brandedCompany = i.brandedCompany
              // 品牌公司查品牌
              getBranded({ brandedCompany, limit: 99999 }).then((res) => {
                let num = 1
                res.data.data.forEach((e) => {
                  this.brandedNameList.push({ value: e.name, label: e.name })
                  if (num) {
                    this.brandedName = e.name
                    num = 0
                  }
                })
              })
              break
            }
          }
        })
      }
    },
    checked(a, b) {
      this.currentPage = 1
      this.$refs.paginationRight.internalCurrentPage = 1
      if (a) {
        // 显示二维表
        this.dataLen = this.styleNumberList.length
        this.knhList = this.knhList2
        this.kindsNumberData = this.styleNumberList.slice(0, this.limit)

        if (localStorage.getItem('jx_Rtitle2')) {
          this.selectHeaderList = localStorage.getItem('jx_Rtitle2').split(',')
        } else {
          this.selectHeaderList = [
            '款号',
            '颜色',
            '05-XS',
            '07-S',
            '09-M',
            '11-L',
            '13-XL',
            '15-2L',
            '17-3L',
            '19-4L',
            '21-5L',
            '23-6L',
            'F',
            '小计',
            '售价',
            '售价金额',
            '厂价',
            '厂价金额',
            '品牌',
            '季度'
          ]
        }

        this.headerList = [
          { value: '款号' },
          { value: '颜色' },
          { value: '05-XS' },
          { value: '07-S' },
          { value: '09-M' },
          { value: '11-L' },
          { value: '13-XL' },
          { value: '15-2L' },
          { value: '17-3L' },
          { value: '19-4L' },
          { value: '21-5L' },
          { value: '23-6L' },
          { value: 'F' },
          { value: '小计' },
          { value: '售价' },
          { value: '售价金额' },
          { value: '厂价' },
          { value: '厂价金额' },
          { value: '品牌' },
          { value: '季度' }
        ]
      } else {
        this.knhList = this.knhList1
        this.dataLen = this.kindsNumberList.length
        this.kindsNumberData = this.kindsNumberList.slice(0, this.limit)

        if (localStorage.getItem('jx_Rtitle1')) {
          this.selectHeaderList = localStorage.getItem('jx_Rtitle1').split(',')
        } else {
          this.selectHeaderList = [
            '厂退序号',
            '单据号',
            '厂商',
            '货号',
            '款号',
            '颜色编号',
            '颜色名称',
            '尺码',
            '数量',
            '售价',
            '售价金额',
            '厂价',
            '厂价金额',
            '退货日期',
            '备注',
            '配货方式',
            '仓库编号',
            '操作员',
            '录入时间'
          ]
        }

        this.headerList = [
          { value: '厂退序号' },
          { value: '单据号' },
          { value: '厂商' },
          { value: '货号' },
          { value: '款号' },
          { value: '颜色编号' },
          { value: '颜色名称' },
          { value: '尺码' },
          { value: '数量' },
          { value: '售价' },
          { value: '售价金额' },
          { value: '厂价' },
          { value: '厂价金额' },
          { value: '退货日期' },
          { value: '备注' },
          { value: '配货方式' },
          { value: '仓库编号' },
          { value: '操作员' },
          { value: '录入时间' }
        ]
      }
    },
    navList(a, b) {
      if (!this.flag) return
      if (a.indexOf('厂商退货查询') == -1) {
        let sequenceList = []
        this.sequenceDataList.forEach((e) => {
          sequenceList.push(e.sequence)
        })
        // console.log(sequenceList)
        clearSequence(sequenceList)
        // .then(res => {
        //   console.log(res)
        // })

        this.flag = 0
      }
    },
    selectHeaderList(a, b) {
      let tmpList = []
      let tmpList2 = []
      this.headerList.forEach((e) => {
        if (a.indexOf(e.value) == -1) {
          tmpList = this.knhList1.filter((i) => {
            return i.label == e.value
          })
          if (tmpList.length) tmpList[0].isShow = false
          tmpList2 = this.knhList2.filter((i) => {
            return i.label == e.value
          })
          if (tmpList2.length) tmpList2[0].isShow = false
        } else {
          tmpList = this.knhList1.filter((i) => {
            return i.label == e.value
          })
          if (tmpList.length) tmpList[0].isShow = true
          tmpList2 = this.knhList2.filter((i) => {
            return i.label == e.value
          })
          if (tmpList2.length) tmpList2[0].isShow = true
        }
      })
      if (this.checked) {
        localStorage.setItem('jx_Rtitle2', this.selectHeaderList.toString())
      } else {
        localStorage.setItem('jx_Rtitle1', this.selectHeaderList.toString())
      }
    },
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    dataLenLeft(a, b) {
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
    limitLeft(a, b) {
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
    $route(a, b) {
      if (b.path.indexOf('delete_document') != -1) this.search()
    },
    printVendor(a, b) {
      if (!a) return
      getManufacturer({ no: a, limit: 99999 }).then((res) => {
        // console.log(res)
        this.printVendorName = res.data.data[0].name
        this.principal = res.data.data[0].principal
        this.contact = res.data.data[0].contact
        this.phone = res.data.data[0].phone
        this.address = res.data.data[0].address
      })
    },
    companyNo(a, b) {
      this.currentPageLeft = 1
      this.companyNo = a.toUpperCase().trim()
    },
    kindsNumber(a, b) {
      this.currentPageLeft = 1
      this.kindsNumber = a.toUpperCase().trim()
    },
    receiptsNumber(a, b) {
      this.currentPageLeft = 1
      this.receiptsNumber = a.toUpperCase().trim()
    },
    sequence(a, b) {
      this.currentPageLeft = 1
      this.sequence = a.toUpperCase().trim()
    },
    commodityName(a, b) {
      this.currentPageLeft == 1
    },
    quarter(a, b) {
      this.currentPageLeft == 1
    },
    companyName(a, b) {
      this.currentPageLeft == 1
    },
    cooperateWay(a, b) {
      this.currentPageLeft == 1
    },
    dateList(a, b) {
      this.currentPageLeft == 1
    },
    brandedName(a, b) {
      this.currentPageLeft == 1
    },
    affirm(a, b) {
      this.currentPageLeft == 1
    }
  },
  components: {
    footView,
    reviSion,
    verifyPassword,
    supOrder,
    printArea
  },
  methods: {
    // 补单
    showuopplement() {
      if (this.showExport == 'block' || this.showpwd) return

      if (!this.inputSequence) {
        this.$alert('请先选择一条数据再进行补单操作', '', {
          confirmButtonText: '确定'
        })
        return
      }

      this.operationType = 1
      this.showpwd = true
    },
    // 导出
    confirmExport() {
      if (this.showpwd || this.showUopplement == 'block') return

      let column = []
      switch (this.radio) {
        case 1:
          // 导出汇总表
          // 导出汇总表
          column = [
            { key: 'sequence', title: '厂退序号', type: 'text' },
            { key: 'receiptsNumber', title: '单号', type: 'text' },
            { key: 'manufacturerName', title: '厂商', type: 'text' },
            { key: 'sum', title: '数量', type: 'text' },
            { key: 'money', title: '售价金额', type: 'text' },
            { key: 'purchaseTime', title: '退货日期', type: 'text' },
            { key: 'affirm', title: '确认', type: 'text' },
            { key: 'operator', title: '操作员', type: 'text' },
            { key: 'remark', title: '备注', type: 'text' },
            { key: 'warehouseNo', title: '公司仓库', type: 'text' }
          ]
          table2excel(column, this.sequenceDataList, '厂商退货汇总表.xls')
          break
        case 2:
          // 导出明细表
          // 导出明细表
          column = [
            { key: 'sequence', title: '厂退序号', type: 'text' },
            { key: 'odd', title: '单据号', type: 'text' },
            { key: 'manufacturerName', title: '厂商', type: 'text' },
            { key: 'kindsNumber', title: '货号', type: 'text' },
            {
              key: 'styleNumber',
              title: '款号',
              type: 'text'
            },
            {
              key: 'colorNo',
              title: '颜色编号',
              type: 'text'
            },
            {
              key: 'colorName',
              title: '颜色名称',
              type: 'text'
            },
            {
              key: 'size',
              title: '尺码',
              type: 'text'
            },
            { key: 'sum', title: '数量', type: 'text' },
            { key: 'sellingPrice', title: '售价', type: 'text' },
            { key: 'sellingPriceMoney', title: '售价金额', type: 'text' },
            { key: 'purchaseTime', title: '退货日期', type: 'text' },
            { key: 'remark', title: '备注', type: 'text' },
            { key: 'cooperateWay', title: '配货方式', type: 'text' },
            { key: 'warehouseNo', title: '仓库编号', type: 'text' },
            { key: 'operator', title: '操作员', type: 'text' },
            { key: 'enteringTime', title: '录入时间', type: 'text' }
          ]
          column = newCloumn(column, this.selectHeaderList)
          table2excel(column, this.kindsNumberList, '厂商退货明细表.xls')
          break
      }
      this.showExport = 'none'
    },
    //显示改单验证密码
    showpwd1() {
      if (this.showExport == 'block' || this.showUopplement == 'block') return
      if (!this.inputSequence) {
        this.$alert('请先选择一条数据再进行改单操作', '', {
          confirmButtonText: '确定'
        })
        return
      }
      let min =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      let sec =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      console.log(this.strRandom + min + sec) //随机字符串加时间      不重复随机字符串
      this.Str = this.strRandom + min + sec
      this.operationType = 2
      this.showpwd = true
    },
    closepwd() {
      this.showpwd = false
    },
    showRevision() {
      switch (this.operationType) {
        case 1:
          this.showUopplement = 'block'
          break
        case 2:
          this.showReviSion = 'block'
          break
        case 3:
          this.$router.push({
            path: '/delete_document',
            query: { type: 2, sequence: this.inputSequence }
          })
          this.$store.commit('addNav', {
            label: '厂商退货删单',
            name: 'delete_document'
          })
          break
        default:
          break
      }
      this.showpwd = false
    },

    //点击出现补单框
    determine(o) {
      // console.log(o)
      this.showUopplement = 'none'
      this.$router.push({
        path: '/input/vendor_return_mn',
        query: { oid: o, type: this.isRFID ? 1 : 0 }
      })
      this.$store.commit('minusNav', '厂商退货')
      // this.$store.commit('addNav',{label:'厂商退货',name:'vendor_return_mn',path:`/input/vendor_return_mn?oid=${o}&type=${this.isRFID?1:0}`})
    },

    // 厂商编号，仓库，失去焦点
    manufacturerNoBlur() {
      if (this.manufacturerNo != '') {
        for (const i of this.manufacturerList) {
          if (this.manufacturerNo == i.value) {
            this.manufacturerName = i.label
            return
          }
        }
        this.$alert('无此厂商编号', '', {
          confirmButtonText: '确定'
        })
        this.manufacturerNo = ''
        this.manufacturerName = ''
      }
    },
    companyNoBlur() {
      if (this.companyNo != '') {
        for (const i of this.warehouseList) {
          if (this.companyNo == i.value) {
            this.companyName = i.label
            return
          }
        }
        this.$alert('无此仓库编号', '', {
          confirmButtonText: '确定'
        })
        this.companyNo = ''
        this.companyName = ''
      }
    },

    rowClick(row) {
      console.log(row.affirm, row.dataSource)
      this.currentPage = 1

      this.inputSequence = row.sequence
      this.pickUpWarehouse = row.warehouseNo
      this.printVendor = row.manufacturerNo
      this.inputDate = row.purchaseTime
      this.remark = row.remark

      // 确认了没
      if (row.affirm) {
        this.isConfirm = true
        if (Number(row.dataSource)) {
          this.Dis = false
          this.Dis1 = false
        } else {
          this.Dis = true
          this.Dis1 = true
        }
      } else {
        this.isConfirm = false
        if (Number(row.dataSource)) {
          this.Dis = false
          this.Dis1 = false
        } else {
          this.Dis = false
          this.Dis1 = true
        }
      }

      // 是不是读卡进的
      if (!Number(row.dataSource)) {
        this.isRFID = true
      } else {
        this.isRFID = false
      }

      this.styleNumberList = []

      // 计算总数
      this.summation.c05 = 0
      this.summation.c07 = 0
      this.summation.c09 = 0
      this.summation.c11 = 0
      this.summation.c13 = 0
      this.summation.c15 = 0
      this.summation.c17 = 0
      this.summation.c19 = 0
      this.summation.c21 = 0
      this.summation.c23 = 0
      this.summation.f = 0

      this.summation.sum = row.sum
      this.summation.money = row.money
      this.summation.sellingPriceMoney = row.money
      this.summation.manufacturerPriceMoney = row.manufacturerPriceMoney

      this.kindsNumberList = row.detailVOList
      this.styleNumberList = row.twoList

      this.styleNumberList.forEach((e) => {
        e.sellingPriceMoney = (e.sellingPrice * e.subTotal).toFixed(2)
      })

      if (this.checked) {
        this.styleNumberList.forEach((e) => {
          this.summation.c05 += Number(e.c05)
          this.summation.c07 += Number(e.c07)
          this.summation.c09 += Number(e.c09)
          this.summation.c11 += Number(e.c11)
          this.summation.c13 += Number(e.c13)
          this.summation.c15 += Number(e.c15)
          this.summation.c17 += Number(e.c17)
          this.summation.c19 += Number(e.c19)
          this.summation.c21 += Number(e.c21)
          this.summation.c23 += Number(e.c23)
          this.summation.f += Number(e.f)

          e.quarterName = this.quarterMap[e.quarter] || ''
        })
        this.dataLen = this.styleNumberList.length
        this.kindsNumberData = this.styleNumberList.slice(0, this.limit)
      } else {
        this.dataLen = this.kindsNumberList.length
        this.kindsNumberData = this.kindsNumberList.slice(0, this.limit)
      }
    },

    // 查询
    search(st) {
      this.kindsNumberList = []
      this.kindsNumberData = []
      this.sequenceDataList = []
      this.sequenceData = []
      this.inputSequence = ''

      this.currentPage = 1
      this.$refs.paginationRight.internalCurrentPage = 1

      if (st) {
        this.currentPageLeft = 1
        this.$refs.paginationLeft.internalCurrentPage = 1
      }

      let a = null
      if (this.affirm == '全部') {
        a = null
      } else if (this.affirm == '未确认') {
        a = 0
      } else if (this.affirm == '已完成') {
        a = 1
      }

      let isDefault =
        this.manufacturerNo == '' &&
        this.commodityName == '' &&
        this.quarter == '' &&
        this.companyNo == this.mainWarehouse &&
        this.cooperateWay == '全部' &&
        this.affirm == '全部' &&
        this.kindsNumber == '' &&
        this.brandedName == '' &&
        this.receiptsNumber == '' &&
        this.sequence == '' &&
        this.dateList == [this.searchDate(7), this.searchDate()]

      let d = {
        isDefault,
        manufacturerNo: this.manufacturerNo,
        commodityName: this.commodityName,
        quarter: this.quarter,
        warehouseNo: this.companyNo,
        cooperateWay: this.cooperateWay == '全部' ? '' : this.cooperateWay,
        affirm: a,
        kindsNumber: this.kindsNumber,
        brandedName: this.brandedName,
        receiptsNumber: this.receiptsNumber,
        sequence: this.sequence,
        startDate: this.dateList ? this.dateList[0] + ' 00:00:00' : null,
        endDate: this.dateList ? this.dateList[1] + ' 23:59:59' : null,
        pageData: {
          page: this.currentPageLeft,
          limit: this.limitLeft
        }
      }
      // console.log(d)
      outQuery(JSON.stringify(d)).then((res) => {
        if (res.data.code == 200) {
          if (!res.data.data) {
            this.$message('暂无数据')
            return
          }

          this.currentPageLeft = 1
          this.$refs.internalCurrentPage = 1

          this.sequenceDataList = res.data.data.resultList
          this.sequenceDataList.forEach((e) => {
            e.purchaseTime = e.purchaseTime.slice(0, 10)
          })
          this.sequenceDataList.sort((a, b) => {
            return b.sequence.localeCompare(a.sequence)
          })
          this.styleNumberList = res.data.data.allTwoList
          this.styleNumberDateList = res.data.data.allTwoDateList

          this.dataLenLeft = res.data.total
          this.amount = this.dataLenLeft

          this.sequenceDataList.sort((a, b) => {
            return b.sequence.localeCompare(a.sequence)
          })
          this.sequenceDataList.forEach((e) => {
            e.purchaseTime = e.purchaseTime.slice(0, 10)
            e.manufacturerName =
              this.manufacturerMap[e.manufacturerNo.toUpperCase()] || ''
            if (e.detailVOList) {
              e.detailVOList.forEach((f) => {
                f.knInfo = f.kindsNumber
                f.kindsNumber = f.knInfo.kindsNumber
                f.styleNumber = f.knInfo.styleNumber
                f.colorNo = f.knInfo.colorNo
                f.colorName = f.knInfo.colorName
                f.size = f.knInfo.size
                f.purchaseTime = e.purchaseTime
                f.odd = e.receiptsNumber
                f.operator = e.operator
                f.quarterName = this.quarterMap[f.quarter] || ''
              })
            }
            this.kindsNumberList = this.kindsNumberList.concat(
              e.detailVOList ? e.detailVOList : []
            )
          })

          // 计算总数
          this.summation.c05 = 0
          this.summation.c07 = 0
          this.summation.c09 = 0
          this.summation.c11 = 0
          this.summation.c13 = 0
          this.summation.c15 = 0
          this.summation.c17 = 0
          this.summation.c19 = 0
          this.summation.c21 = 0
          this.summation.c23 = 0
          this.summation.f = 0
          this.summation.sellingPriceMoney = 0

          this.summation.sum = res.data.data.totalNumber
          this.summation.money = res.data.data.totalMoney
          this.summation.manufacturerPriceMoney =
            res.data.data.manufacturerPriceMoney

          if (this.styleNumberList.length) {
            this.styleNumberList.forEach((f) => {
              f.quarterName = this.quarterMap[f.quarter] || ''
              f.sellingPriceMoney = (f.sellingPrice * f.subTotal).toFixed(2)
              this.summation.c05 += Number(f.c05)
              this.summation.c07 += Number(f.c07)
              this.summation.c09 += Number(f.c09)
              this.summation.c11 += Number(f.c11)
              this.summation.c13 += Number(f.c13)
              this.summation.c15 += Number(f.c15)
              this.summation.c17 += Number(f.c17)
              this.summation.c19 += Number(f.c19)
              this.summation.c21 += Number(f.c21)
              this.summation.c23 += Number(f.c23)
              this.summation.f += Number(f.f)

              // this.summation.money += Number(f.money)
            })
          }
          // console.log(this.summation)
          this.kindsNumberList.forEach((e) => {
            e.manufacturerName = this.manufacturerMap[e.manufacturerNo] || ''
            this.summation.sellingPriceMoney += Number(e.sellingPriceMoney)
          })

          if (this.styleNumberDateList) {
            this.styleNumberDateList.forEach((f) => {
              f.purchaseTime = f.purchaseTime.slice(0, 10)
            })
          }

          this.sequenceData = this.sequenceDataList.slice(0, this.limitLeft)

          if (this.checked) {
            this.dataLen = this.styleNumberList.length
            this.kindsNumberData = this.styleNumberList.slice(0, this.limit)
          } else {
            this.dataLen = this.kindsNumberList.length
            this.kindsNumberData = this.kindsNumberList.slice(0, this.limit)
          }

          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        }
      })
    },

    // 确认
    confirm() {
      if (!this.inputSequence) {
        this.$alert('请先选择一条数据再进行确定操作', '', {
          confirmButtonText: '确定'
        })
        return
      }
      affirmRfidOut({
        inputSequence: this.inputSequence,
        warehouseNo: this.pickUpWarehouse,
        updateType: 1
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '确认成功',
            type: 'success'
          })
          this.isConfirm = true
          for (const i of this.sequenceDataList) {
            if (this.inputSequence == i.sequence) {
              i.affirm = 1
              break
            }
          }
        } else {
          this.$message.error('确认失败')
        }
      })
    },

    // 列印
    printReport() {
      this.clearPrintTable()
      this.styleList = []
      this.printTotal = 0
      this.printMoney = 0
      this.printStyle = 0
      this.printSellingPrice = 0
      this.$confirm('是否使用A4纸打印', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          // 用A4纸
          // console.log('用A4纸')
          this.openPrint(true)
        })
        .catch((action) => {
          // 用半张A4纸
          if (action == 'cancel') {
            // console.log('用半张A4纸')
            this.openPrint(false)
          }
        })
    },
    openPrint(isA4, x = 1, id = 'printTable') {
      // console.log('openPrint')
      let index = --x
      let printTable = document.getElementById(id)
      let length = this.styleNumberList.length

      for (index; index < length; index++) {
        const e = this.styleNumberList[index]
        // console.log(index)
        // console.log(index+1)
        this.printTotal += Number(e.subTotal)
        this.printMoney += Number(e.money)
        this.printSellingPrice += Number(e.sellingPriceMoney)

        let row = printTable.insertRow(printTable.FetchRowCount)
        row.insertCell(0).innerHTML = index + 1
        row.insertCell(1).innerHTML = e.typeNumber + '-' + e.colorNo
        row.insertCell(2).innerHTML = e.colorName
        row.insertCell(3).innerHTML = e.commodityName
        row.insertCell(4).innerHTML = e.c05
        row.insertCell(5).innerHTML = e.c07
        row.insertCell(6).innerHTML = e.c09
        row.insertCell(7).innerHTML = e.c11
        row.insertCell(8).innerHTML = e.c13
        row.insertCell(9).innerHTML = e.c15
        row.insertCell(10).innerHTML = e.c17
        row.insertCell(11).innerHTML = e.c19
        row.insertCell(12).innerHTML = e.c21
        row.insertCell(13).innerHTML = e.c23
        row.insertCell(14).innerHTML = e.f
        row.insertCell(15).innerHTML = e.subTotal
        row.insertCell(16).innerHTML = e.sellingPrice
        row.insertCell(17).innerHTML = e.sellingPriceMoney

        if (isA4) {
          // console.log(parseInt((index+1)/33))
          // console.log((index+1)%33 == 0)
          if (
            parseInt((index + 1) / 33) &&
            (index + 1) % 33 == 0 &&
            index + 1 != length
          ) {
            // console.log('33倍数')
            let pageIndex = index + 3 - parseInt(index / 33) * 33
            // console.log(pageIndex)
            // console.log(index+1)    // 33
            // console.log(length)     // 36
            let startingPoint = index - 32
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].subTotal)
              pageMoney += Number(this.styleNumberList[j].money)
            }

            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'

            let newHead = document.createElement('div')
            newHead.classList.add('addPrintHead')
            newHead.innerHTML = `
              <p class="rightTag" style="top: ${
                ((index + 1) / 33) * 29.7 + 3
              }cm;">白联仓库 红联财务 黄联客户</p>
              <span class="printHead">
                ${this.manufacturerName}${this.jxQuarter}厂商退货单
              </span>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商：${this.printVendorName}</p>
                <p style="margin: 5px 0;">联系人：${this.contact}</p>
                <p style="margin: 5px 0;">退货序号：${this.inputSequence}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商电话：${this.phone}</p>
                <p style="margin: 5px 0;">退货日期：${this.inputDate}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">公司地址：${this.address}</p>
              </div>
            `
            newHead.style.pageBreakBefore = 'always'
            this.insertAfter(newHead, printTable)

            let tableId = `printTable${(index + 1) / 33}`
            // console.log(tableId)
            let tableDom = document.createElement('table')
            tableDom.border = '1'
            tableDom.align = 'center'
            tableDom.id = tableId
            tableDom.innerHTML = `
              <thead>
                <tr>
                  <td style="width: 4%;padding: 0;text-align: center;" rowspan="2">序号</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">型色</td>
                  <td style="width: 8%;padding: 0;text-align: center;" rowspan="2">颜色</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">品名</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">05</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">07</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">09</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">11</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">13</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">15</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">17</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">19</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">21</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">23</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;">F</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">数量</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">售价</td>
                  <td rowspan="2" style="text-align: center;">金额</td>
                </tr>
                <tr>
                  <td style="text-align: center;border-top: 1px dotted;border-left: 1px dotted;">XS</td>
                  <td style="text-align: center;border-top: 1px dotted;">S</td>
                  <td style="text-align: center;border-top: 1px dotted;">M</td>
                  <td style="text-align: center;border-top: 1px dotted;">L</td>
                  <td style="text-align: center;border-top: 1px dotted;">XL</td>
                  <td style="text-align: center;border-top: 1px dotted;">2L</td>
                  <td style="text-align: center;border-top: 1px dotted;">3L</td>
                  <td style="text-align: center;border-top: 1px dotted;">4L</td>
                  <td style="text-align: center;border-top: 1px dotted;">5L</td>
                  <td style="text-align: center;border-top: 1px dotted;">6L</td>
                  <td style="text-align: center;border-top: 1px dotted;"></td>
                </tr>
              </thead>
            `
            // console.log(tableDom)
            // console.log(index)
            this.printStyleCount(e.typeNumber)
            this.insertAfter(tableDom, newHead)
            this.openPrint(true, index + 2, tableId)
            return
          }
          if (index + 1 == length) {
            let pageIndex = index + 3 - parseInt(index / 33) * 33
            // console.log('最后一行')
            let startingPoint = index < 33 ? 0 : parseInt(index / 33) * 33
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].subTotal)
              pageMoney += Number(this.styleNumberList[j].money)
            }
            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'
          }
        } else {
          if (
            parseInt((index + 1) / 12) &&
            (index + 1) % 12 == 0 &&
            index + 1 != length
          ) {
            // console.log('12倍数')
            let pageIndex = index + 3 - parseInt(index / 12) * 12
            // console.log(pageIndex)
            // console.log(index+1)    // 12
            // console.log(length)     // 36
            let startingPoint = index - 11
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].subTotal)
              pageMoney += Number(this.styleNumberList[j].money)
            }

            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'

            let newHead = document.createElement('div')
            newHead.classList.add('addPrintHead')
            newHead.innerHTML = `
              <p class="rightTag" style="top: ${
                ((index + 1) / 12) * 14.85 + 3
              }cm;">白联仓库 红联财务 黄联客户</p>
              <span class="printHead">
                ${this.manufacturerName}${this.jxQuarter}厂商退货单
              </span>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商：${this.printVendorName}</p>
                <p style="margin: 5px 0;">联系人：${this.contact}</p>
                <p style="margin: 5px 0;">退货序号：${this.inputSequence}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商电话：${this.phone}</p>
                <p style="margin: 5px 0;">退货日期：${this.inputDate}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">公司地址：${this.address}</p>
              </div>
            `
            newHead.style.pageBreakBefore = 'always'
            this.insertAfter(newHead, printTable)

            let tableId = `printTable${(index + 1) / 12}`
            // console.log(tableId)
            let tableDom = document.createElement('table')
            tableDom.border = '1'
            tableDom.align = 'center'
            tableDom.id = tableId
            tableDom.innerHTML = `
              <thead>
                <tr>
                  <td style="width: 4%;padding: 0;text-align: center;" rowspan="2">序号</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">型色</td>
                  <td style="width: 8%;padding: 0;text-align: center;" rowspan="2">颜色</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">品名</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">05</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">07</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">09</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">11</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">13</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">15</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">17</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">19</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">21</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">23</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;">F</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">数量</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">售价</td>
                  <td rowspan="2" style="text-align: center;">金额</td>
                </tr>
                <tr>
                  <td style="text-align: center;border-top: 1px dotted;border-left: 1px dotted;">XS</td>
                  <td style="text-align: center;border-top: 1px dotted;">S</td>
                  <td style="text-align: center;border-top: 1px dotted;">M</td>
                  <td style="text-align: center;border-top: 1px dotted;">L</td>
                  <td style="text-align: center;border-top: 1px dotted;">XL</td>
                  <td style="text-align: center;border-top: 1px dotted;">2L</td>
                  <td style="text-align: center;border-top: 1px dotted;">3L</td>
                  <td style="text-align: center;border-top: 1px dotted;">4L</td>
                  <td style="text-align: center;border-top: 1px dotted;">5L</td>
                  <td style="text-align: center;border-top: 1px dotted;">6L</td>
                  <td style="text-align: center;border-top: 1px dotted;"></td>
                </tr>
              </thead>
            `
            // console.log(tableDom)
            // console.log(index)
            this.printStyleCount(e.typeNumber)
            this.insertAfter(tableDom, newHead)
            this.openPrint(false, index + 2, tableId)
            return
          }
          if (index + 1 == length) {
            let pageIndex = index + 3 - parseInt(index / 12) * 12
            // console.log('最后一行')
            let startingPoint = index < 12 ? 0 : parseInt(index / 12) * 12
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].subTotal)
              pageMoney += Number(this.styleNumberList[j].money)
            }
            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'
          }
        }

        this.printStyleCount(e.typeNumber)
      }

      this.printStyle = this.styleList.length
      // console.log(this.styleList)
      let int = setInterval(() => {
        if (this.printStyle) {
          clearInterval(int)
          let printHtml = document.getElementById('p').innerHTML
          let wind = window.open(
            '',
            'newwindow',
            'height=500, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'
          )
          wind.document.body.innerHTML = printHtml
          let style = document.createElement('style')
          style.type = 'text/css'
          style.innerHTML = resources.printCSS
          wind.document.head.appendChild(style)
          wind.print()
          return false
        }
      }, 500)
    },
    clearPrintTable() {
      let printTable = document.getElementById('printTable')
      let trs = printTable.getElementsByTagName('tr')
      let len = trs.length - 1
      for (let i = len; i > 1; i--) {
        printTable.deleteRow(i)
      }

      let printArea = document.getElementById('p')
      let tables = printArea.getElementsByTagName('table')
      len = tables.length
      for (let i = 1; i < len; i++) {
        tables[1].remove()
      }
      let addPrintHeads = document.getElementsByClassName('addPrintHead')
      len = addPrintHeads.length
      for (let i = 0; i < len; i++) {
        addPrintHeads[0].remove()
      }
    },
    printStyleCount(s) {
      if (!this.styleList.length) {
        this.styleList.push(s)
      } else {
        let exist = 0
        for (const i of this.styleList) {
          // console.log(i)
          if (i == s) {
            exist = 1
            break
          }
        }
        if (!exist) {
          this.styleList.push(s)
        }
      }
    },
    // insertAfter(p,header1) // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
    insertAfter(newElement, targetElement) {
      // newElement是要追加的元素 targetElement 是指定元素的位置
      let parent = targetElement.parentNode // 找到指定元素的父节点
      if (parent.lastChild == targetElement) {
        // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
        parent.appendChild(newElement, targetElement)
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling)
      }
    },

    dele() {
      if (!this.inputSequence) return
      this.operationType = 3
      this.showpwd = true
    },

    // 每页显示页数改变
    handleSizeChange(val) {
      this.limit = val
      this.currentPage = 1

      switch (this.checked) {
        case true:
          this.dataLen = this.styleNumberList.length
          this.kindsNumberData = this.styleNumberList.slice(
            0,
            this.currentPage * this.limit
          )
          break
        case false:
          if (this.inputSequence) {
            this.dataLen = this.styleNumberList.length
            this.kindsNumberData = this.styleNumberList.slice(
              0,
              this.currentPage * this.limit
            )
          } else {
            this.dataLen = this.kindsNumberList.length
            this.kindsNumberData = this.kindsNumberList.slice(
              0,
              this.currentPage * this.limit
            )
          }
          break
      }
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      switch (this.checked) {
        case true:
          this.kindsNumberData = this.styleNumberList.slice(
            (this.currentPage - 1) * this.limit,
            this.currentPage * this.limit
          )
          break
        case false:
          if (this.inputSequence) {
            this.kindsNumberData = this.styleNumberList.slice(
              (this.currentPage - 1) * this.limit,
              this.currentPage * this.limit
            )
          } else {
            this.kindsNumberData = this.kindsNumberList.slice(
              (this.currentPage - 1) * this.limit,
              this.currentPage * this.limit
            )
          }
          break
      }
    },

    handleSizeChangeLeft(val) {
      this.limitLeft = val
      this.search(1)
      return
      this.sequenceData = this.sequenceDataList.slice(
        (this.currentPageLeft - 1) * this.limitLeft,
        this.currentPageLeft * this.limitLeft
      )
    },
    handleCurrentChangeLeft(val) {
      this.currentPageLeft = val
      this.search()
      return
      this.sequenceData = this.sequenceDataList.slice(
        (this.currentPageLeft - 1) * this.limitLeft,
        this.currentPageLeft * this.limitLeft
      )
    },

    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const prop = column.property

        switch (prop) {
          case 'sum':
            sums[index] = this.summation.sum || ''
            break
          case 'subTotal':
            sums[index] = this.summation.sum || ''
            break
          case 'sellingPriceMoney':
            sums[index] = this.summation.sellingPriceMoney || ''
            break
          case 'money':
            sums[index] = this.summation.money || ''
            break
          case 'c05':
            sums[index] = this.summation.c05 || ''
            break
          case 'c07':
            sums[index] = this.summation.c07 || ''
            break
          case 'c09':
            sums[index] = this.summation.c09 || ''
            break
          case 'c11':
            sums[index] = this.summation.c11 || ''
            break
          case 'c13':
            sums[index] = this.summation.c13 || ''
            break
          case 'c15':
            sums[index] = this.summation.c15 || ''
            break
          case 'c17':
            sums[index] = this.summation.c17 || ''
            break
          case 'c19':
            sums[index] = this.summation.c19 || ''
            break
          case 'c21':
            sums[index] = this.summation.c21 || ''
            break
          case 'c23':
            sums[index] = this.summation.c23 || ''
            break
          case 'f':
            sums[index] = this.summation.f || ''
            break
          case 'manufacturerPriceMoney':
            sums[index] = this.summation.manufacturerPriceMoney || ''
            break
        }
        let decimal = sums[index] ? sums[index].toString().split('.')[1] : ''
        if (decimal && decimal.length > 2) {
          sums[index] = sums[index].toFixed(2)
        }
      })
      return sums
    },

    dividerClick() {
      let content1 = document.getElementById('content1')
      let content2 = document.getElementById('content2')
      if (this.areaFlag) {
        content1.style.width = '30%'
        content2.style.width = '69%'
      } else {
        content1.style.width = '60%'
        content2.style.width = '39%'
      }
      this.areaFlag = !this.areaFlag
    },

    changeCellStyle({ row, column, rowIndex, columnIndex }) {
      let style = 'height:26px;padding:0;'
      if (!row.affirm) {
        // return style + `background-color:${this.$store.state.unconfirmedBG};`
      } else {
        // return style
      }
      return style
    }
  }
}
</script>
